<template>
  <div class="container">
    <Header :title="'作业票列表'" :backStep="'index'"></Header>
    <van-tabs v-model="active" swipeable color="#006BFF" @click="onClick">
      <van-tab title="全部" name="-1">
        <div class="homeworkList">
          <div
            class="homeWorkItem"
            v-for="item in jobList"
            :key="item.jobTicketId"
            @click="goDetail"
          >
            <div class="rightStatus" v-if="item.jobStatusName == '待审核'">
              待审核
            </div>
            <div
              class="rightStatus rightStatus2"
              v-if="item.jobStatusName == '已通过'"
            >
              已通过
            </div>
            <div
              class="rightStatus rightStatus3"
              v-if="item.jobStatusName == '未通过'"
            >
              未通过
            </div>
            <div class="homeworkCode">作业票编号 : {{ item.jobTicketId }}</div>
            <div class="homeworkContent">
              <div class="location">作业地点 : {{ item.jobAddress }}</div>
              <div class="location">申请人 : {{ item.jobSubmitter }}</div>
              <div class="location">作业内容 : {{ item.jobContent }}</div>
              <div class="location">
                时间段 : {{ item.jobStartTime }}-{{ item.jobEndTime }}
              </div>
            </div>
            <div class="btnBox">
              <van-button
                class="btnStyle"
                plain
                v-if="item.jobStatusName == '待审核'"
                >撤销作业票</van-button
              >
              <!-- <van-button class="btnStyle btnStyle2" plain>点击开锁</van-button> -->
              <van-button
                class="btnStyle"
                plain
                v-if="item.jobStatusName == '未通过'"
                >重新提交</van-button
              >
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="待审核" name="0">
        <div class="homeworkList">
          <div
            class="homeWorkItem"
            v-for="item in jobList"
            :key="item.jobTicketId"
            @click="goDetail"
          >
            <div class="rightStatus" v-if="item.jobStatusName == '待审核'">
              待审核
            </div>
            <div class="homeworkCode">作业票编号 ：{{ item.jobTicketId }}</div>
            <div class="homeworkContent">
              <div class="location">作业地点 : {{ item.jobAddress }}</div>
              <div class="location">申请人 : {{ item.jobSubmitter }}</div>
              <div class="location">作业内容 : {{ item.jobContent }}</div>
              <div class="location">
                时间段 : {{ item.jobStartTime }}-{{ item.jobEndTime }}
              </div>
            </div>
            <div class="btnBox">
              <van-button class="btnStyle" plain>撤销作业票</van-button>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="已通过" name="1">
        <div class="homeworkList">
          <div
            class="homeWorkItem"
            v-for="item in jobList"
            :key="item.jobTicketId"
            @click="goDetail"
          >
            <div class="rightStatus rightStatus2">已通过</div>
            <div class="homeworkCode">作业票编号 ：{{ item.jobTicketId }}</div>
            <div class="homeworkContent">
              <div class="location">作业地点 : {{ item.jobAddress }}</div>
              <div class="location">申请人 : {{ item.jobSubmitter }}</div>
              <div class="location">作业内容 : {{ item.jobContent }}</div>
              <div class="location">
                时间段 : {{ item.jobStartTime }}-{{ item.jobEndTime }}
              </div>
            </div>
            <!-- <div class="btnBox">
              <van-button class="btnStyle btnStyle2" plain>点击开锁</van-button>
            </div> -->
          </div>
        </div></van-tab
      >
      <van-tab title="未通过" name="2">
        <div class="homeworkList">
          <div
            class="homeWorkItem"
            v-for="item in jobList"
            :key="item.jobTicketId"
            @click="goDetail"
          >
            <div class="rightStatus rightStatus3">未通过</div>
            <div class="homeworkCode">作业票编号 : {{ item.jobTicketId }}</div>
            <div class="homeworkContent">
              <div class="location">作业地点 : {{ item.jobAddress }}</div>
              <div class="location">申请人 : {{ item.jobSubmitter }}</div>
              <div class="location">作业内容 : {{ item.jobContent }}</div>
              <div class="location">
                时间段 : {{ item.jobStartTime }}-{{ item.jobEndTime }}
              </div>
            </div>
            <div class="btnBox">
              <van-button class="btnStyle" plain>重新提交</van-button>
            </div>
          </div>
        </div></van-tab
      >
    </van-tabs>
  </div>
</template>

<script>
import { getJobDataListApi } from '@/api/index'
import Header from '@/components/Header.vue'
export default {
  name: 'homeworkList',
  props: {},
  components: {
    Header,
  },
  data() {
    return {
      active: 0,
      jobList: [],
      jobStatus: '',
    }
  },
  created() {
    this.getJobDataList()
  },
  methods: {
    onClick(name) {
      console.log(name)
      if (name == -1) {
        this.jobStatus = ''
      } else {
        this.jobStatus = name
      }
      this.getJobDataList()
    },
    goDetail() {
      this.$router.push({ path: '/homeWorkDetail' })
    },
    async getJobDataList() {
      const res = await getJobDataListApi({
        id: JSON.parse(sessionStorage.getItem('loginInfo')).userId,
        jobStatus: this.jobStatus,
      })
      this.jobList = res.data
      // console.log(res)
    },
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
}
</script>

<style scoped lang="scss">
.container {
  background-color: #f7f7f7;
  .homeworkList {
    padding: 12px 16px;
    .homeWorkItem {
      // height: 212px;
      background-color: #fff;
      border-radius: 8px;
      margin-bottom: 12px;
      position: relative;
      padding: 12px;
      .rightStatus {
        position: absolute;
        top: 0px;
        right: 0px;
        font-size: 14px;
        color: #fff;
        background: #006bff;
        border-radius: 0px 8px 0px 8px;
        width: 52px;
        height: 24px;
        line-height: 24px;
        text-align: center;
      }
      .rightStatus2 {
        background: #25bf95;
      }
      .rightStatus3 {
        background: #ed1616;
      }
      .homeworkCode {
        font-weight: bold;
        font-size: 14px;
      }
      .homeworkContent {
        padding: 14px 12px 0;
        border-bottom: 1px solid #e5e5e5;
        color: #3a3b3d;
        font-size: 12px;
        .location {
          margin-bottom: 12px;
        }
      }
      .btnBox {
        text-align: right;
        margin-top: 12px;
        .btnStyle {
          height: 28px;
          border: 1px solid #d0d2d5;
          padding: 0 12px;
          font-size: 12px;
          border-radius: 3px;
          color: #333 !important;
        }
        .btnStyle2 {
          color: #006bff !important;
          border: 1px solid #006bff;
        }
      }
    }
  }
}
</style>
